<template>
	<div class="discover">
		<div class="discoverHeader">
			<p>发现</p>
		</div>
		<div class="discoverBanner" v-if="!showMenu">
			<div class="allList">
				<div class="discoverList" v-for="(item,index) in listData" :class="{red:item.TYPE_ID==defaultTypeId}" @click="changeTYPE(item.TYPE_ID,index)">
					<p>{{item.TYPE_NAME}}</p>
				</div>
				<div class="listBank"></div>
			</div>
			<div class="downArrow" @click="pullDown">
				<img src="../../assets/image/discover/downArrow.png" alt="" />
			</div>
		</div>
		<!--显示所有菜单栏start-->
		<div class="discoverBanners" v-if="showMenu">
			<div class="discoverLists" v-for="(item,index) in listAllData" :class="{red:item.TYPE_ID==defaultTypeId}" @click="changeTYPE(item.TYPE_ID,index)">
				<p>{{item.TYPE_NAME}}</p>
			</div>
			<div class="upArrow" @click="pullUp">
				<img src="../../assets/image/discover/upArrow.png" alt="" />
			</div>
		</div>
			<!--显示所有菜单栏end-->
			<scroller class='myScroller' :on-infinite="infinite" ref="myScroller" :on-refresh="refresh">
				<div class="allItem">
					<div class="discoverListBorder" v-for="item in allData" @click="goDiscoverDetail(item.ART_ID)">
						<div class="discoverListImgs">
							<div class="discoverListImg">
								<img :src="item.IMG_PATH" alt="" />
							</div>
							<div class="discoverListText1">
								<p>{{item.AUTHOR}}&thinsp;•&thinsp;{{item.CREATETIME|filterTimes}}</p>
								<p>{{item.CLICKS}}次阅读</p>
							</div>
							<div class="discoverListText2">
								<p>{{item.SUBJECT}}</p>
							</div>
							<div class="discoverListText3">
								<p>{{item.REVIEW}}</p>
							</div>
						</div>
					</div>
				</div>
			</scroller>
		<!-- <div class="discoverFooterBlank"></div> -->
		<toast v-model="showdisc" type="text" :text="text1" position='top'></toast>
	</div>
</template>
<script>
/*发现*/
import { XHeader,Toast} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
import Vue from 'vue'
export default {
	name: "discover",
	// 数据
	data() {

		return {
			userId: '',
			phone: '',
			page: 1, //页数
			isRed: true, //字体是否红色
			showMenu: false, //是否显示下拉菜单
			imgUrl: '', //封面图
			allData: '', //所有数据
			defaultTypeId:'',//默认的type_id
			listData: '', //资讯分类数据前几条
			listAllData:'',//资讯全部分类数据		
			flag:false,
			selectIndex:0,
			showdisc:false,
			text1:''
		}
	},
	// 计算属性
	computed: {

	},
	// 创建（实例创建完成）
	created() {
		this.userId = getCookie('loginkey');
		//资讯分类
		this.$fetchPost('/ArticleWeb/getInfoType').then(res => {			
		//console.dir(res);
			if(res.STATUS_CODE == 1) {							
				this.listAllData = res.RESULT_DATA;
				this.defaultTypeId = this.listAllData[0].TYPE_ID;
				this.listData = this.listAllData;
				this.flag=true;
				this.allDatas();				
			}
		},err=>{})				
	},
	// el被创建，并挂载到实例上
	mounted() {
		
	},
	// 方法（实例中的方法）-----------
	methods: {
		//下拉
		pullDown() {				
			this.showMenu = true;
		},
		//上拉
		pullUp() {
			this.showMenu = false;
			this.$nextTick(function(){
				this.scroll();
			});
		},
		//详情
		goDiscoverDetail(id) {
			this.$router.push('/discoverDetail/' + id);
		},
		//加载
		infinite() {						
			// setTimeout(()=>this.allDatas(),500);
		    if(this.flag){
		    	this.allDatas();
		    }
		},
		//下拉获取最新
		refresh(){
			let obj = {};
			if(this.page<=1){
				return;
			}
			obj.PAGE_NO = 1;
			obj.TYPE_ID = this.defaultTypeId;			
			this.$fetchPost('/ArticleWeb/getInfoList',obj).then(res => {
				if(res.STATUS_CODE == 1) {						
					let len1=res.RESULT_DATA.length;
					let len2=this.unquie(this.allData,res.RESULT_DATA).length;
					if(len2>len1){
						this.allData=this.unquie(this.allData,res.RESULT_DATA);
						this.showdisc=true;
						setTimeout(()=>{
							this.showdisc=false
						},2000);
						this.text1='已更新'
					}else{
						this.showdisc=true;
						setTimeout(()=>{
							this.showdisc=false
						},2000);
						this.text1='暂无该类最新资讯'
					}
					this.$refs.myScroller.finishPullToRefresh();
				}				
			}, err => console.log(err));
		},
		//合并两个数组，并去除掉重复项
	    unquie(arr1, arr2){ 
	     for (var i = 0 ; i < arr1.length ; i ++ ){
	       for(var j = 0 ; j < arr2.length ; j ++ ){
	        if (arr1[i].ART_ID === arr2[j].ART_ID){
	         arr1.splice(i,1); //利用splice函数删除元素，从第i个位置，截取长度为1的元素
	        }
	       }
	     }
	     for(var i = arr2.length-1; i <=0; i--){
	      arr1.unshift(arr2[i]);
	     }
	     return arr1;
	    },
		//所有数据
		allDatas(){			
		    //资讯列表
			let obj = {};
			obj.PAGE_NO = this.page;
			obj.TYPE_ID = this.defaultTypeId;			
			this.$fetchPost('/ArticleWeb/getInfoList',obj).then(res => {
				if(res.STATUS_CODE == 1) {						
					if(res.RESULT_DATA.length==0){						
		          		this.$refs.myScroller.finishInfinite(2);//通知scroller数据全部加载完成		          		
		          		return;
		          	}
					if(this.page>1){
						this.allData = this.allData.concat(res.RESULT_DATA);
						this.page++;
						this.$refs.myScroller.finishInfinite();//通知scroller数据加载完成
					}else{
						this.allData = res.RESULT_DATA;
						this.page++;
						this.$refs.myScroller.finishInfinite();//通知scroller数据加载完成
					}
				}				
			}, err => console.log(err));
		},
		//头部滚动
		scroll(){
			let documentWidth=document.body.clientWidth||document.documentElement.clientWidth;
			let listLeft=document.getElementsByClassName('allList')[0].children[this.selectIndex].offsetLeft;
			let listWidth=document.getElementsByClassName('allList')[0].children[this.selectIndex].offsetWidth;
			if(listLeft>documentWidth/2){
				document.getElementsByClassName('allList')[0].scrollLeft=listLeft-documentWidth/2+listWidth/2;
			}
		},
		//切换类型
		changeTYPE(id,index){							
			this.defaultTypeId = id;
			this.selectIndex=index;
			this.page=1;
			if(!this.showMenu){
				this.scroll();
			}
			let obj = {};
			obj.PAGE_NO = this.page;
			obj.TYPE_ID = this.defaultTypeId;				
			this.$fetchPost('/ArticleWeb/getInfoList',obj
			).then(res => {						
					this.allData = res.RESULT_DATA;	
				}, err => console.log(err));
			},
	},
	// 子组件
	components: {
		XHeader,Toast
	}
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
	.discover {
		min-height: 100%;
		background: #efeff4;
		.discoverHeader {
			position: fixed!important;
			top: 0;
			width: 7.5rem;
			height: 0.88rem;
			background: #fff;
			z-index: 99;
			p {
				font-size: 0.36rem;
				color: #000000;
				line-height: 0.88rem;
			}
			.borderBFu(#b2b2b2);
		}
		.allItem{
		}
		.discoverBanner {
			position: fixed;
			top: 0.88rem;
			width:100%;
			height: 1rem;
			background: #f4f4f4;
			z-index: 9;
			.allList{
				display: flex;
			    flex-flow: row nowrap;
			    overflow: scroll;
			    height: 100%;
			}						
			.discoverList {
				align-self: center;	
				.borderFu(#999999,0.56rem);	
				margin: 0 0.12rem;											
				p {							
					text-align:center;					
					height: 0.56rem;
					line-height:0.4rem;		
					padding:0.1rem 0.2rem;
					box-sizing: border-box;
					border-radius: 0.28rem;
					font-size: 0.26rem;
					color: #666666;					
					background: #fff;	
					z-index: 99;
					white-space: nowrap;					
				}
			}
			.red {
				p{
					color: #EC2121;
				    opacity: 0.75;
				}
				.borderFu(#ec2121,0.56rem);
			}
			.downArrow {
				width: 1rem;
				height: 0.98rem;
				position: absolute;
				right: 0;
				top: 0;
				background: #f4f4f4;
				z-index: 999;
				display: flex;
				justify-content: center;
				box-shadow:-3px 0px 5px rgba(0,0,0,.2);				
				img {
					align-self: center;
					width: 0.26rem;
					height: 0.14rem;
				}
			}
		}
		.listBank{
			padding: 0.5rem;
		}
		.discoverBanners {
			position: fixed;
			top: 0.88rem;
			width: 7.5rem;			
			background: #f4f4f4;
			display: flex;
			flex-flow: row wrap;
			z-index: 99;
			.discoverLists {
				align-self: center;
				.borderFu(#999999,0.56rem);
				margin-top: 0.12rem;
				margin-left: 0.2rem;
				p {
					align-self: center;					
					height: 0.56rem;
					line-height:0.4rem;
					padding:0.1rem 0.2rem;
					border-radius: 0.28rem;
					font-size: 0.26rem;
					color: #666666;
					background: #fff;
					text-align: center;
					overflow : hidden;
				}

			}
			.red {
				p{
				   color: #EC2121;
				   opacity: 0.75;
				}
				.borderFu(#ec2121,0.56rem);
			}
			.upArrow {
				width: 7.5rem;
				height: 0.5rem;
				background: #f4f4f4;
				z-index: 99;
				display: flex;
				justify-content: center;
				img {
					align-self: center;
					width: 0.26rem;
					height: 0.14rem;
				}
			}
		}
		.discoverListBorder {
			background: #fff;
			padding: 0.03rem 0;
    		margin-bottom: 0.15rem;
			.discoverListImgs {
				width: 6.925rem;
				margin: 0 auto;
				.discoverListImg {
					height: 3.762rem;
					margin-top: 0.2rem;
					img {
						width: 6.925rem;
						height: 3.762rem;
					}
				}
				.discoverListText1 {
					display: flex;
					margin-top: 0.1rem;
					position: relative;
					justify-content:space-between;
					align-items:center;				
					p:first-child {
						font-size: 0.25rem;
						color: #333030;
					}
					p:last-child {
						background: #ececec;
						font-size: 0.25rem;
						color: #828282;
						border-radius: 0.2rem;
						padding:0.05rem 0.1rem;
					}
				}
				.discoverListText2 {
					margin-top: 0.2rem;
					p {
						font-size: 0.38rem;
						color: #000;
						font-weight: bold;
						text-align: left;
						overflow: hidden;
						text-overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
				.discoverListText3 {
					margin-top: 0.15rem;
					margin-bottom: 0.32rem;
					p {
						font-size: 0.32rem;
						color: #828282;
						text-align: left;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
			}
			.discoverListBlank {
				height: 0.21rem;
				background: #f2f2f2;
			}
		}
		.discoverFooterBlank {
			height: 0.88rem;
		}
	}
</style>